    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
        <script src="../renderer/index.js"></script>
        <script>
            var bState = false

            function openDevTools() {
                let {
                    remote
                } = require('electron')
                if (!bState) {
                    remote.getCurrentWindow().webContents.openDevTools()
                } else {
                    remote.getCurrentWindow().webContents.closeDevTools()
                }
                bState = !bState
                var txt = '关闭调试界面'
                if (!bState)
                    txt = '打开调试界面'
                document.getElementById('opendevtools').innerText = txt
            }

            function openDevTools2() {
                let {
                    remote
                } = require('electron')
                if (!bState) {
                    remote.getCurrentWebContents().openDevTools()
                } else {
                    remote.getCurrentWebContents().closeDevTools()
                }
                bState = !bState
                var txt = '关闭调试界面'
                if (!bState)
                    txt = '打开调试界面'
                document.getElementById('opendevtools2').innerText = txt
            }
        </script>
        <script>
            let {
                ipcRenderer
            } = require('electron')

            function showWin(sender) {
                ipcRenderer.send('openWindow', sender.innerText)
            }

            function sendMsg(msg) {
                ipcRenderer.send(msg)
            }
        </script>
    </head>

    <body style="background: white;">
        <h2>Electron基础操作</h2>
        <p>
            We are using Node.js <span id="node-version"></span>,
            Chromium <span id="chrome-version"></span>,
            and Electron <span id="electron-version"></span>.
        </p>
        <button id="NewPage">新窗体-事件方式</button>
        <br>
        <button id="newWindow">新窗体-remote方式</button>
        <br>
        <button id="ShowNotification">显示通知</button>
        <br>
        <button id='opendevtools' onclick="openDevTools()">打开调试界面</button>
        <button id='opendevtools2' onclick="openDevTools2()">打开调试界面</button>
        <br>
        <button onclick="sendMsg('appQuit')">app.quit()</button>
        <button onclick="sendMsg('winDestroy')">window.destroy()</button>
        <button onclick="sendMsg('procExit')">process.exit</button>
        <br>
        <h2>Electron演示</h2>
        <br>
        <table border="2">
            <tr>
                <td><button onclick="showWin(this)">Electron窗体</button></td>
                <td><button onclick="showWin(this)">Electron窗体控制</button></td>
            </tr>
            <tr>
                <td><button onclick="showWin(this)">页面内容</button></td>
                <td><button onclick="showWin(this)">页面容器</button></td>
                <td><button onclick="showWin(this)">脚本注入</button></td>
                <td><button onclick="showWin(this)">页面动效</button></td>
            </tr>
            <tr>
                <td><button onclick="showWin(this)">本地数据持久化</button></td>
                <td><button onclick="showWin(this)">浏览器数据持久化</button></td>
                <td><button onclick="showWin(this)">Sqlite数据持久化</button></td>
            </tr>
            <tr>
                <td><button onclick="showWin(this)">系统对话框</button></td>
                <td><button onclick="showWin(this)">菜单与快捷键</button></td>
                <td><button onclick="showWin(this)">剪切板与系统通知</button></td>
                <td><button onclick="showWin(this)">托盘图标与其他</button></td>
            </tr>
        </table>
    </body>

    </html>